<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Quick Start - Layui</title>
<!--    <link href="//cdn.staticfile.org/layui/2.9.7/css/layui.css" rel="stylesheet">-->
<!--    <script src="//cdn.staticfile.org/layui/2.9.7/layui.js"></script>-->

<!--    引入本地的css，js资源-->
    <link href="../layui/css/layui.css" rel="stylesheet">
    <script src="../layui/layui.js"></script>

    <style>
        #box{
            width: 100px;
            height: 100px;
            border: 1px solid #16b777;
        }
    </style>
</head>
<body>
<!-- HTML Content -->

<div id="box">

</div>

<h1>按钮的使用</h1>
<button class="layui-btn layui-btn-primary layui-border-green layui-btn-xs">普通按钮</button>
<div class="layui-btn-group">
    <button type="button" class="layui-btn" onclick="test()">增加</button>
    <button type="button" class="layui-btn ">编辑</button>
    <button type="button" class="layui-btn">删除</button>
</div>

<div class="layui-btn-group">
    <button type="button" class="layui-btn layui-btn-sm">
        <i class="layui-icon layui-icon-add-1"></i>
    </button>
    <button type="button" class="layui-btn layui-btn-sm">
        <i class="layui-icon layui-icon-edit"></i>
    </button>
    <button type="button" class="layui-btn layui-btn-sm">
        <i class="layui-icon layui-icon-delete"></i>
    </button>
    <button type="button" class="layui-btn layui-btn-sm">
        <i class="layui-icon layui-icon-right"></i>
    </button>
</div>

<div class="layui-btn-group">
    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">文字</button>
    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
        <i class="layui-icon layui-icon-add-1"></i>
    </button>
    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
        <i class="layui-icon layui-icon-edit"></i>
    </button>
    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
        <i class="layui-icon layui-icon-delete"></i>
    </button>
</div>


<h1>图标的基本使用</h1>
<i class="layui-icon layui-icon-face-smile" style="font-size: 60px;color: red"></i>
<i class="layui-icon layui-icon-heart-fill" style="font-size: 60px;color: red"></i>
<i class="layui-icon layui-icon-android" style="font-size: 60px;color: #16b777"></i>
<i class="layui-icon layui-icon-ios" style="font-size: 60px;color:#f7f7f7"></i>
<i class="layui-icon layui-icon-login-wechat" style="font-size: 60px;color: red"></i>
<i class="layui-icon layui-icon-login-qq" style="font-size: 60px;color: red"></i>





<script>
    // Usage
    layui.use(function(){
        //  引入弹出层模块
        var layer = layui.layer;
        // Welcome
        layer.msg('Hello World', {icon: 1,time:5000},function () {
            console.log("信息提示结束")
        });
    });


    function test() {
        console.log("测试按钮事件的绑定")
    }
</script>
</body>
</html>
